/**
 * 单词搜索框组件
 * @author 杨世峰
 */

<template>
  <div class="searchBar">
    <div class="navBar_home_logo">
      <h3 style="text-align: center">自家用英语学习平台</h3>
    </div>
    <div class="navBar_home_input">
      <span class="navBar_home_input_left"></span>
      <input
        type="text"
        placeholder="搜索"
        class="navBar_home_inputText"
        v-model="wordSpell"
        @keyup.enter="searchWord"
      />
      <span class="navBar_home_input_right"></span>
    </div>

    <dict-search-result></dict-search-result>
  </div>
</template>

<script>
import DictSearchResult from "@/components/user/DictSearchResult.vue";
import { getWord } from "@/api/user/bookletApi.js";

export default {
  name: "DictSearchBar",
  components: {
    DictSearchResult,
  },
  data() {
    return {
      wordSpell: "",
    };
  },
  methods: {
    searchWord() {
      // 编写单词查询
      console.log(this.wordSpell);
      getWord(this.wordSpell)
        .then((res) => {
          console.log(res);
          if (res.resultCode === 200) {
            this.$store.commit("SET_CURRENT_WORD", res.data);
            this.$notify({
              title: "成功",
              message: res.message,
              type: "success",
            });
          } else {
            this.$notify({
              title: "失败",
              message: res.message,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.searchBar {
  background-color: #f6f7f9;
  margin-top: 78px;
  position: static;
  padding-bottom: 100px;
}

.navBar_home_input {
  position: relative;
  width: 80%;
  max-width: 840px;
  margin: 48px auto 0;
}

.navBar_home_input_left {
  content: "";
  position: absolute;
  top: 16px;
  left: 20px;
  width: 20px;
  height: 20px;
  background: url(https://weread-1258476243.file.myqcloud.com/web/wrwebnjlogic/image/search_magnifier.3aaf44ac.png)
    no-repeat;
  background-size: 100%;
}

.navBar_home_inputText {
  box-shadow: 0 4px 20px rgb(0 25 104 / 5%);
  width: 100%;
  padding: 0 52px;
  box-sizing: border-box;
  height: 52px;
  border-radius: 26px;
  font-size: 16px;
  color: #212832;
  background: #fff;
}

.navBar_home_input_right {
  background: url(https://weread-1258476243.file.myqcloud.com/web/wrwebnjlogic/image/search_return_white.0c921c5a.png)
    no-repeat;
  background-size: 100%;
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
}

input {
  margin: 0;
  padding: 0;
  border: 0;
}

input {
  font-size: inherit;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input {
  font-family: PingFang SC, -apple-system, SF UI Text, Lucida Grande, STheiti,
    Microsoft YaHei, sans-serif;
  outline: none;
  -webkit-text-size-adjust: none;
}
</style>